<template>
	<view class="permission_model element" v-if="isShow" @click="isShow = false">
		<view class="content_container element">
			<view class="text-333 title">权限使用说明</view>
			<view class="content fs28">{{ permissionContent }}</view>
		</view>
		<!-- -->
	</view>
</template>

<script>
	export default {
		name: 'DongxianPermissionModel',
		data() {
			return {
				isShow: false
			};
		},
		props: {
			permissionContent: {
				type: String,
				default: '获取相册权限和相机权限的目的是为了上传头像，发布帖子，以及完成企业认证时候上传证件照及其他相关资料。'
			}
		},
		methods: {
			open() {
				this.isShow = true;
				console.log('%c [ this.isShow ]-29', 'font-size:13px; background:pink; color:#bf2c9f;', this.isShow)
			},
			close() {
				this.isShow = false;
			}
		},
	};
</script>
<style lang="scss" scoped>
	.permission_model {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
		opacity: 0;

		.content_container {
			background-color: #fff;
			border-radius: 12rpx;
			width: 88%;
			margin: 80rpx auto;
			opacity: 0;
		}

		.title {
			color: #333;
			padding: 40rpx 30rpx 0 30rpx;
		}

		.content {
			color: #666;
			font-size: 28rpx;
			padding: 30rpx 30rpx 50rpx;
		}
	}

	/* 定义一个淡入的关键帧 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* 应用动画到具体的元素 */
	.element {
		/* 动画名称 | 持续时间 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 时间函数 */
		animation: fadeIn 1.5s ease-in-out forwards;
	}
</style>